<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title> vue-cnode</title>
  <style>
    #Loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #7d7d7de3;
      z-index: 100;
    }

    .loadindex {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80px;
      height: 80px;
      transform: translateY(-50%) translateX(-50%);
    }

    .loadindex p {
      position: absolute;
      top: 75px;
      left: 0;
      color: #fff;
    }

    .cube1,
    .cube2 {
      width: 16px;
      height: 16px;
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      animation: cubemove 1.8s infinite ease-in-out
    }

    .cube2 {
      animation-delay: -0.9s
    }

    @keyframes cubemove {
      25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
      }

      50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg)
      }

      50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
      }

      75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
      }

      100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg)
      }
    }
  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but vue-cnode doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="Loading">
    <div class="loadindex">
      <div class="cube1"></div>
      <div class="cube2"></div>
      <p>正在载入...</p>
    </div>
  </div>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>